import { createVar, globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../global.css';

export const toggleSize = createVar();

export const toggleStyle = style({
	display: 'inline-flex',
	backgroundColor: 'transparent',
	border: 'none',
	padding: '0',
	margin: '0',
	verticalAlign: 'middle',
	flexDirection: 'row',
	alignItems: 'center',
	cursor: 'pointer',
	color: vars.color.regularText,
	fontSize: '1rem',
	selectors: {
		'&[disabled]': {
			color: vars.color.disabledText,
			cursor: 'not-allowed',
		},
	},
	vars: {
		[toggleSize]: '1.7rem',
	},
});

globalStyle(`${toggleStyle} > div`, {
	display: 'flex',
	overflow: 'visible',
	flexDirection: 'row',
	justifyContent: 'left',
	boxSizing: 'border-box',
	padding: '1px',
	margin: '0 0.3rem',
	alignItems: 'center',
	transition: 'background-color 0.5s',
	flexShrink: '0',
	width: `calc(${toggleSize} * 1.5)`,
	height: `calc(${toggleSize} / 2)`,
	borderRadius: toggleSize,
	backgroundColor: vars.color.infoLight,
});

globalStyle(`${toggleStyle} > div > div`, {
	display: 'block',
	position: 'relative',
	transition: 'transform 0.3s, background-color 0.3s',
	flexShrink: '0',
	left: '-2px',
	width: `calc(${toggleSize} - 2px)`,
	height: `calc(${toggleSize} - 2px)`,
	borderRadius: '1rem',
	backgroundColor: vars.color.white,
	boxShadow: `0px 0px 5px ${vars.color.shadow}`,
});

globalStyle(`${toggleStyle}[checked=true] > div`, {
	backgroundColor: vars.color.brand,
});

globalStyle(`${toggleStyle}[checked=true] > div > div`, {
	transform: `translateX(calc(${toggleSize} / 2))`,
	left: '2px',
	backgroundColor: vars.color.white,
});

globalStyle(`${toggleStyle}[disabled] > div > div`, {
	backgroundColor: vars.color.disabledText,
});
